<%@ page language="java" pageEncoding="UTF-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

		<script>
		</script>
		<div class="navbar">
			<ul>
				<li><a href="/">首页</a></li>
				<li id="catagorybar">
					<c:forEach items="${categoryTags}" var="categoryTag" end="6">
						<a href="/goods?opr=list&cid=${categoryTag.id}">${categoryTag.categoryName}</a>
					</c:forEach>
				</li>
			</ul>
			<div class="mycart">
				<dl>
					<c:if test="${empty sessionScope.USER}">
						<dt id="mycart">
							<a href="javascript:void(0)">请登录后查看购物车
							</a>
						</dt>
						<dd>
							<a href="javascript:void(0)"></a>
						</dd>
					</c:if>
					<c:if test="${not empty sessionScope.USER}">
						<dt>
							<a href="/cart?opr=list">购物车<b name="mycart_count" id="mycart_count">${allGoodsNum}</b>件
							</a>
						</dt>
						<dd>
							<a href="javascript:void(0)">去结算</a>
						</dd>
					</c:if>
				</dl>

				<!--购物车浮动div 开始-->
				<div class="shopping" id='div_mycart' style='display:none;'></div>
				<!--购物车浮动div 结束-->
				<script type='text/html' id='cartTemplete'>

			</script>
				<!--购物车模板 结束-->

			</div>

			<!-- 弹窗代码开始  -->
			<div class="web_notice" id="msgdiv"
				style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;">
				<div id="msg"
					style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
					<h3 style="font-weight: bold;text-align: center;font-size: 30px;">您还没有登录</h3>
					<div
						style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
						<a href="javascript:void(0);" onclick="goTOLogin()"
							style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 80px;margin-top: 60px;border-radius: 32px;width: 20%;">登录</a>
						<a href="user?opr=register"
							style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 210px;margin-top: -60px;border-radius: 32px;width: 20%;">注册</a>
						<a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 340px;margin-top: -60px;border-radius: 32px;width: 20%;"
							onclick="nomsgDiv()">再看看</a>
					</div>

				</div>
			</div>
			<!-- 弹窗代码结束  -->
		</div>
		<style>
			#msg,
			#msgdiv {
				display: none;
			}

			/* 弹窗动画 */
			#msg {
				-webkit-animation: fadeleftIn .4s;
				animation: fadeleftIn .4s;
				-webkit-animation-name: popIn;
				animation-name: popIn;
			}

			@-webkit-keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					-webkit-transform: scale3d(1, 1, 1);
					transform: scale3d(1, 1, 1);
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}

			@keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					/* -webkit-transform: scale3d(1, 1, 1); */
					/* transform: scale3d(1, 1, 1); */
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}
		</style>
		<script>
			window.addEventListener("load", function () {


				document.getElementById("mycart").addEventListener("click", function () {
					document.getElementById("msg").style.display = "block";
					document.getElementById("msgdiv").style.display = "block";
				})
				document.getElementById("addCart").addEventListener("click", function () {
					document.getElementById("msg").style.display = "block";
					document.getElementById("msgdiv").style.display = "block";
				})

			})
			function nomsgDiv() {
				document.getElementById("msg").style.display = "none";
				document.getElementById("msgdiv").style.display = "none";
			}
			// 通过js发送refer
			function goTOLogin() {
				location.href = "user?opr=login";
			}
		</script>

		<script>
			$(function () {
				let nums = $("#mycart_count").text();
				localStorage.setItem("mycart_count",nums); 
				let catagorybar=$("#catagorybar").html();
				localStorage.setItem("catagorybar",catagorybar); 
			})
		</script>